﻿<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Financial Tracking</title>
<script src="${pageContext.request.contextPath}/js/jquery.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/jquery-ui.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/highcharts.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/global.js" type="text/javascript"></script>

<link rel="stylesheet" href="${pageContext.request.contextPath}/css/jquery-ui.css" type="text/css"/>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/styles.css" type="text/css"/>


<script>
	$("head").append('<link rel="icon" type="image/icon" href="${pageContext.request.contextPath}/images/mini-icon.ico">');
	
	var ZONE_ID = "";
	$(function(){
		var currentURL = '${SESSION_SUMMARY.url}';
		if(currentURL !== ''){
			window.location.href = '${pageContext.request.contextPath}' + currentURL;
		}
	
		$("#domainName").prop("disabled",true);
		var lastDate = new Date();
		lastDate.setDate(lastDate.getDate() - 15);
		
		var tooltipsPointFormat = '<span style="color: {series.color}; font-weight: bold; font-size:16px">{series.name}</span><br>';
		tooltipsPointFormat += '<span style="font-size: 16px">{point.name}:</span> <span style="color: #4390df; font-weight: bold; font-size:16px">{point.y:,.2f}</span>';
		tooltipsPointFormat += '<span style="font-size: 16px">{point.units}บาท</span><br/>';
		Highcharts.setOptions({
			chart: {
				type: 'bar',
				height: 465
			},
			credits:{
				enabled: false
			},
			xAxis: {
				type: "category",
				labels:{
					style: {"fontSize": "14px", "color": "black", "font-weight": "bold"}
				}
			},
			yAxis: {
				labels:{
					style: {"fontSize": "12px", "color": "black"}
				},
				min: 0
// 				max: 9000	
			},
			legend: {
				reversed: true,
            	verticalAlign: 'top'
			},
			plotOptions: {
				series: {
					stacking: 'normal',
					depth: 40,
					pointWidth: 20,
					style:{
						"width":"100px"
					}
				}
			},
			tooltip: {
				//headerFormat: '<span style="color: {series.color}; font-weight: bold; font-size:16px">{series.name}</span>',
				headerFormat: '',
				pointFormat: tooltipsPointFormat,
				positioner: function(boxWidth, boxHeight, point) {
					var position = point.plotX;
					var data = point.plotX - 200;
					if(position < 1000){
						data = point.plotX + 50;
					}else{
						data = point.plotX - data + 600;
					}
					return {x:data, y:point.plotY + 65};
				}
			},
		});
		
		$(document).ready(function(){
			$.searchData();			
		});
		
		$.searchData = function(){
			var fromVal = $("#fromDate").val();
			var toVal = $("#toDate").val();
			fromVal = formatStrDate(fromVal);
			toVal = formatStrDate(toVal);
			if(!fromVal){
				$("#fromDate").focus();
				$.alert("", "โปรดระบุวันที่ให้ถูกต้องเช่น 01 มกราคม 2555");
				return;
			}
			if(!toVal){
				$("#toDate").focus();
				$.alert("", "โปรดระบุวันที่ให้ถูกต้องเช่น 01 มกราคม 2555");
				return;
			}
			
			if(!checkDate(fromVal, toVal)){
				$("#fromDate").val(formatDate(lastDate));
				return;
			}
			
			var data = {fromDate: fromVal, toDate: toVal};
			$.ajax({
	            url : '${pageContext.request.contextPath}/summary/chart/getsumprocess',
	            type: "POST",
	            data: data,
	            success : function(data) {
					if(data.success){
						if(data.code === "0000"){
							datas = data.datas;
							$.mappingCharts(datas);
						}else{
	            			$.alert("", data.msg);
						}
					}else{
	            		$.alert("", data.msg);
					}
	            }
	        });
		};
		
		var units = "";
		$.mappingCharts = function(maps){
		 	var process = new Array();
		 	var payable = new Array();
		 	var transfer = new Array();
			$.each(maps, function(key, value) {
				if(key === "PROCESS"){
					$.each(value, function(i, val) {
						var amount = $.formatAmountInHighcharts(val.amount);
						process.push({id: val.zoneId, name: val.zoneName, y: amount, units: units,
						events: {
							click: function(e){
								$.loadpage(val.zoneId);
							}
						}});
					});
				}else if(key === "PAYABLE"){
					$.each(value, function(i, val) {
						var amount = $.formatAmountInHighcharts(val.amount);
						payable.push({id: val.zoneId, name: val.zoneName, y: amount, units: units,
						events: {
							click: function(e){
								$.loadpage(val.zoneId);
							}
						}});
					});
				}else{
					$.each(value, function(i, val) {
						var amount = $.formatAmountInHighcharts(val.amount);
						transfer.push({id: val.zoneId, name: val.zoneName, y: amount, units: units,
						events: {
							click: function(e){
								$.loadpage(val.zoneId);
							}
						}});
					});
				}
			});
			
			$('#summaryChartMain').highcharts({
			borderWidth:20,
				title: {
					text: 'Summary Track Station',
					style: {
						display: 'none'
					}
				},
				credits:{
					enabled: false
				},
				yAxis: {
					title: {
						text: 'จำนวนเงิน(ล้านบาท)'
					}
				},
				series: [{
					name: 'ตัดจ่าย',
					color: "#457a11",
					data: transfer
				},{
					name: 'ตั้งหนี้',
					color: "#eda048",
					data: payable
				},{
					name: 'ระหว่างประมวลผล',
					color: "#4390df",
					data: process
				}]
			});
			
			$("text.highcharts-yaxis-title").attr("y","455");
		};
		
		
		
		
		var fromDate = "${SESSION_SUMMARY.fromDateStr}";
		var toDate = "${SESSION_SUMMARY.toDateStr}";
		if(fromDate === ""){
			//Fix default 01 May 2013
			fromDate = formatDate(new Date("05/01/2013"));
		}else{
			fromDate = toDatepickerValue(fromDate);
		}
		
		if(toDate === ""){
			toDate = formatDate(new Date());
		}else{
			toDate = toDatepickerValue(toDate);
		}
		
		$("#fromDate").datepicker({
			buttonImage: "${pageContext.request.contextPath}/images/calendar.gif"
		});
		$("#fromDate").val(fromDate);
		$("#toDate").datepicker({
			buttonImage: "${pageContext.request.contextPath}/images/calendar.gif"
		});
		$("#toDate").val(toDate);
		
		
		$("#btnSearch").click(function(){
			$.searchData();
		});
		
		$("input[name='userType']:radio").change(function(){
			var value = $(this).val();
			if(value === "H"){
				$("#domainName").prop("disabled",true);
			}else{
				$("#domainName").val("");
				$("#domainName").prop("disabled",false);
			}
		});
		
		
		
		$.formatAmountInHighcharts = function(valAmount){
			units = "ล้าน";
			var currentAmount = parseFloat(valAmount) / 1000000;
			
			return currentAmount;
		};
	});
</script>
</head>

<body>
	<!------------------- Header ------------------>
    <div class="panel">
    	<jsp:include page="../include/header.jsp"/>
    </div>
    <!--------------------------------------------->
	
    <div class="block-content">
    	<!--<jsp:include page="../include/breadcrumb.jsp"/>-->

        <div id="content" class="content-data">
        	<!-- Content Data -->
            <div class="panel text-center">
                <div class="panel-content text-center">
                	ข้อมูลจากวันที่&nbsp;
                    <input type="text" id="fromDate">
                    &nbsp;ถึงวันที่&nbsp;
                    <input type="text" id="toDate">
                    <button id="btnSearch">ค้นหา</button>
                </div>
            </div>
            <div class="panel">
                <div class="panel-content">
                	<div id="summaryChartMain" style="width: 99%"></div>
                </div>
            </div>
            <div class="required" style="padding-left: 5px; margin-top: 5px;">**เป็นข้อมูลซึ่งบันทึกเพื่อขอรับค่าใช้จ่ายบริการสาธารณสุขผ่านโปรแกรม e-Claim ตั้งแต่ 01 พฤษภาคม 2556</div>
        </div>
    </div>
	
</body>
</html>
